<template>
  <view class="presets-img-box py-3 gap-3">
    <wd-img
      v-for="item in images"
      :key="item"
      :src="calcUrl(item)"
      width="360rpx"
      mode="widthFix"
      @tap="$emit('on-click-img', item)"
    />
  </view>
</template>
<script lang="ts" setup>
import { drawObj } from "@/hooks/useWorkFlowGenerate";
import { WorkFlowTypeEnum, TemplateType, ImgTabsEnum, RdTypeEnum } from "@/utils/enums";

const props = withDefaults(
  defineProps<{
    currentFlow?: string; // 工作流
    currentChooseTemplate?: number | string; // 选择模板类型
    currentImgTab: number; // 图片类型
    currentGranularity: string; // 图片粒度
  }>(),
  {
    currentFlow: WorkFlowTypeEnum.PICTURE_CREATE_BY_LINE,
    currentChooseTemplate: TemplateType.BUILD,
    currentImgTab: ImgTabsEnum.BASIC,
    currentGranularity: RdTypeEnum.DETAILED,
  },
);

const calcUrl = (url: string) => {
  if (url?.includes(".png")) {
    return url?.split(".png")[0] + `-min` + `.png`;
  }
  if (url?.includes(".PNG")) {
    return url?.split(".PNG")[0] + `-min` + `.PNG`;
  }
  return url;
};

// 图片类别
const images = computed(() => {
  // 区分工作流类型
  const list = drawObj[props.currentFlow as keyof typeof drawObj].filter(
    (item) => item.templateNum === props.currentChooseTemplate,
  );
  let resultList: string[] = [];
  if (props.currentGranularity) {
    const drawItem = list.find((item) => item.type === props.currentGranularity) || list[0];
    if (!drawItem) return [];
    if (props.currentImgTab === ImgTabsEnum.REFERENCE) {
      resultList = drawItem.PresetIPAImgs || [""];
    } else {
      // base
      resultList = drawItem.PresetsBaseImgs || [""];
    }
  } else {
    const drawItem = list[0];
    if (!drawItem) return [];
    if (props.currentImgTab === ImgTabsEnum.REFERENCE) {
      resultList = drawItem.PresetIPAImgs || [""];
    } else {
      // style
      resultList = drawItem.PresetsBaseImgs || [""];
    }
  }
  return resultList;
});
</script>
<style lang="scss" scoped>
.presets-img-box {
  @apply flex flex-col items-center box-border;
}
</style>
